import React, { Component } from 'react';
import {connect} from "react-redux";
import $ from "jquery";

import {fetchProductsList} from "../actions/actions_getProducts";

const mapStateToProps=(state)=>{  
    return {
        products:state.products
    }
}

class Longs extends Component{   

    changePage(page){
        $("html").scrollTop(850);  //跳转       
        this.props.fetchProductsList(page)
    }


    render(){
            console.log(this.props.products);
            var productsArr=[];           
            if(this.props.products.rows !==undefined){
                var productsItem=this.props.products.rows;               
                for(let i=0;i<15;i++){
                    productsArr.push(
                        <div className="col-md-4" key={i}>
                                <dl>
                                    <dt><img src={productsItem[i].url} /></dt>
                                    <dd>
                                            <p>{productsItem[i].title}</p>                                            
                                            <div className="row">
                                                    <div className="col-md-8">￥{productsItem[i].nowprice}</div>
                                                    <div className="col-md-4 price"><del>￥{productsItem[i].price}</del></div>
                                            </div>                                            
                                            <button type="button" className="btn btn-danger">加入购物车</button>
                                    </dd>
                                </dl>
                        </div>
                    );
                }

               

            }


        return (            
                <div className="container">
                    <div className="jumbotron">
                        <div className="row">
                                  {productsArr}                            
                        </div>   
                    </div>
                </div> 
        )        
    }

    componentDidMount(){
        this.props.fetchProductsList();
    }
}


module.exports=connect(mapStateToProps,{fetchProductsList})(Longs);